<template>
  <div class="home">
    <div class="add-from" v-if="show">
      <el-form
        :model="form"
        :rules="rules"
        ref="form"
        label-width="100px"
        class="demo-ruleForm"
      >
        <!-- temp -->
        <el-form-item label="用户id">
          <el-input v-model="userInfo.userId"></el-input>
        </el-form-item>
        <el-form-item label="用户名">
          <el-input v-model="userInfo.name"></el-input>
        </el-form-item>

        <!-- tempEnd -->
        <el-form-item label="会议号" prop="roomId">
          <el-input v-model="form.roomId"></el-input>
        </el-form-item>
        <el-form-item label="会议名称" prop="name">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm()">立即创建</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="video-box">
      <div v-if="this.rtcClient && this.remoteTracks"
      class="room-title"
      >
        会议号：{{form.roomId}}
      </div>
      <div v-for="item of userIds" :key="item">
        {{item}}
      </div>
      <template v-for="track in localTracks">
        <video
          :key="track.getTrackId()"
          v-if="track.isVideoTrack()"
          class="video"
          :id="'rc-video-' + track.getTrackId()"
          :ref="'rc-video-' + track.getTrackId()"
          muted
          autoplay
        ></video>
      </template>
        <!-- v-if="isSubscriptionTrack" -->
      <template v-for="track in subscriptionTracks">
        <video
          v-if="track.isVideoTrack()"
          :key="track.getTrackId()"
          class="video"
          :id="'rc-video-' + track.getTrackId()"
          :ref="'rc-video-' + track.getTrackId()"
          muted
          autoplay
        ></video>
      </template>
      <div v-if="this.rtcClient && this.remoteTracks" class="btn-box">
        <el-button
          type="primary"
          v-if="!publishScreenTrack"
          @click="publishScreenShare"
        >
          共享屏幕
        </el-button>
        <el-button
          type="primary"
          v-else
          @click="unPublish('publishScreenTrack',publishScreenTrack)"
        >
          停止共享
        </el-button>


        <el-button
          type="primary"
          v-if="!publishMicrophoneAudioTrack"
          @click="publishMicrophoneAudio"
        >
          打开麦克风
        </el-button>
        <el-button
          type="primary"
          v-else
          @click="unPublish('publishMicrophoneAudioTrack',publishMicrophoneAudioTrack)"
        >
          关闭麦克风
        </el-button>

        <el-button
          type="primary"
          v-if="!publishCameraVideoTrack"
          @click="publishCameraVideo"
        >
          打开摄像头
        </el-button>
        <el-button
          type="primary"
          v-else
          @click="unPublish('publishCameraVideoTrack',publishCameraVideoTrack)"
        >
          关闭摄像头
        </el-button>
      </div>
    </div>
  </div>
</template>

<script>
import im from "./js/im";
import rtc from "./js/rtc";

export default {
  name: "Home",
  mixins: [im, rtc],
  data() {
    return {
      show: true,
      form: {
        name: "名称", // 会议名称
        roomId: "146", // 会议号,加入的房间id
      },
      rules: {
        roomId: [{ required: true, message: "请输入会议号", trigger: "blur" }],
        name: [{ required: true, message: "请输入会议名称", trigger: "blur" }],
      },

     appKey: "p5tvi9dspl0t4", // appKey
 appSecret: "cZw5d2od1dyz", // 秘钥

      im: null, // IM实例
      token: "", // token

      userInfo: {
        // 用户信息
        userId: "userId123", // 用户id
        name: "用户A", // 用户名
        url: "https://himg.bdimg.com/sys/portrait/item/pp.1.af317ce7.aOWFSt1FGlDfTqcsQzxwPw", // 头像
      },

      rtcClient: null, // rtc客户端
      remoteTracks: null, // 当前已发布至房间内的远端资源列表
      userIds: null, // 当前已加入房间的远端人员列表
      room: null, // 房间room实例
      // isSubscriptionTrack: false, // 是否存在订阅的音视频流
      subscriptionTracks: [],        // 订阅的视频流
      localTracks: [], // 本地资源
      publishScreenTrack: null, // 当前共享屏幕的资源
      publishMicrophoneAudioTrack: null, // 当前已发布麦克风资源
      publishCameraVideoTrack: null, // 当前已发布的摄像头资源
    };
  },
  methods: {
    submitForm() {
      let flag = false;

      this.$refs.form.validate((valid) => (flag = valid));

      if (!flag) return this.$message.error("请输入完整信息后再确认！");
      this.show = false;
      this.start();
    },
    async start() {
      // 开始初始化
      /* im 操作 */
      this.imInit(); // 获取 im 实例
      if (!this.im) return this.$message.error("初始化失败！");

      let [e, data] = await this.getToken(); // 获取 token
      if (e) return this.$message.error("获取token失败！");
      console.log(data);
      this.token = data.token;

      this.watch(); // 监听 im
      [e, data] = await this.linkIM(); // 开始 im 连接
      if (e) return this.$message.error("连接失败，请刷新重试！");

      /* rtc 操作 */
      this.rtcInit(); // 初始化
      if (!this.rtcClient)
        return this.$message.error("rtc初始化失败，请刷新重试！");

      const code = await this.joinRoom(); // 加入房间
      if (code) return this.$message.error("加入房间失败,错误代码:" + code);

      if (!this.rtcClient || !this.remoteTracks)
        return this.$message.error("房间实例或远端资源获取失败，请重试！");

      this.roomWatch(); // 房间监听

      this.subscribe(); // 订阅
    },
  },
};
</script>
<style lang="less" scoped>
.add-from {
  width: 50%;
  margin: 50px auto;
}
.video-box {
  position: relative;
  width: 95%;
  height: 80vh;
  border: 1px solid #000;
  margin: auto;
  .room-title{
    border: 1px solid #000;
    width: 100%;
    height: 2em;
  }
  .video {
    border: 1px solid #000;
    width: 100%;
  }
  .btn-box {
    position: absolute;
    bottom: 0;
  }

}
</style>
